<template>
  <div class="left-container">
    <h3>Left 组件</h3>
    <hr>

    <p>score 值：{{ $store.state.study.score }}</p>
    <p>cartList 值：{{ $store.state.cart.cartList }}</p>
    <p>cartList 值：{{ cartList }}</p>
    <button class="btn btn-primary">+1</button>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
  name: 'Left',
  computed: {
    ...mapState('cart', ['cartList'])
  },
  created () {
    /*
    // 以后不会这么写 -- 因为它会所有模块里的同名方法都调用一遍
    // 就导致调用不精确，很容易出问题
    this.$store.dispatch('reqCartList') // 我希望毛都没写就调用根

    // 开启命名空间，可以让子模块的调用更加精确
    // 以后开子模块，先给这个子模块开启命名空间
    this.$store.dispatch('cart/reqCartList') // 我希望写cart/就调用cart模块
    */
    this.reqCartList() 
  },
  methods: {
    // ...mapActions(['reqCartList'])// 简化了根的

    // 简化cart模块里的reqCartList
    ...mapActions('cart', ['reqCartList'])
  }
}
</script>

<style>
</style>
